<template>
	<view v-if="store.cartList.length > 0" class="cart-container">
		<view class="shop">
			<van-icon name="shop-o" />
			<text class="shop-name">嗨购商城</text>
		</view>
		<!-- 购物车中的商品项 -->
		<uni-swipe-action>
			<uni-swipe-action-item v-for="item in store.cartList" :key="item.proid" :right-options="options"
				@click="store.deleteGoodsById(item.proid)">
				<view class="goods-cell" @click="goToGoodsDetail(item.proid)">
					<radio :checked="item.checked" color="#c82519"
						@click.stop="changeState(item.proid,!item.checked)" />
					<van-card :title="item.proname" :thumb="item.img">
						<template #price>
							<view
								style="margin-top: 60rpx;display: flex;justify-content: space-between;align-items: center;"
								@click.stop="">
								<text
									style="font-size: 16px;font-weigth:800;color: red;">￥{{format.formatPrice(item.price)}}</text>
								<van-stepper style="text-align: right;" :value="item.number" theme='round'
									@change="changeNumber(item.proid,$event)" />
							</view>
						</template>
					</van-card>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<van-submit-bar :price="store.selectTotalAmount * 100" button-text="提交订单" @submit="onClickButton"
			:disabled="store.selectTotalAmount === '0.00'">
			<template #default>
				<!-- <van-checkbox v-model="allSelect">全选</van-checkbox> -->
				<!-- <van-checkbox v-model="allSelect">全选</van-checkbox> -->
				<van-checkbox icon-size="20px" :value="store.isAllSelect"
					@change="store.selectAll($event.detail)">全选</van-checkbox>
			</template>
		</van-submit-bar>
	</view>
	<view v-else>
		<van-empty class="custom-image"
			image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
			description="购物车是空的，赶快去挑选好货" />
	</view>
</template>

<script setup lang="ts">
	import { useCartStore } from '../../stores/cart'
	import { useFormat } from '../../hooks'
	// import { computed } from 'vue'

	import { useTotalCount, useTabBarItemText } from '../../hooks'
	useTotalCount()
	useTabBarItemText()


	const store = useCartStore()
	const format = useFormat()

	/**
	const allSelect = computed({
		get() {
			return store.isAllSelect
		},
		set(value) {
			// 调用仓库中的代码，更改商品项目的值要么为true，要么为false
		}
	})
	**/

	const options = [
		{
			text: '删除',
			style: {
				backgroundColor: '#c82519'
			}
		}
	]

	const changeState = (proid : string, checked : boolean) => {
		// store.changeGoodsState({ proid, checked } as GoodsItem)

		store.changeGoodsState({ proid, checked })
	}

	const changeNumber = (proid : string, { detail } : any) => {
		store.changeGoodsNumber({ proid, number: detail })
	}

	// 全选
	const selectAll = (e : any) => {
		store.selectAll(e.detail)
	}

	// 提交
	const onClickButton = () => {

	}

	// 跳转到商品详情页面
	const goToGoodsDetail = (proid : string) => {
		uni.navigateTo({
			url: `/subpkg/goods-detail/goods-detail?proid=${proid}`
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-empty__image {
		padding-top: 200rpx;
		width: 80px;
		height: 80px;
	}

	.cart-container {
		overflow: auto;
		height: calc(100vh - 50px);

		.shop {
			background-color: white;
			border-bottom: 1px solid #edeeed;
			padding: 5px 10px;

			.shop-name {
				margin-left: 5px;
				font-size: 14px;
				color: #3f3f3f;
			}
		}

		.goods-cell {
			display: flex;
			background-color: white;
			border-bottom: 1px solid #edeeed;
			height: 100%;
			align-items: center;
			height: 220rpx;
			padding: 10rpx 10rpx 10rpx 20rpx;

			::v-deep .van-card {
				background-color: transparent;
			}

			// .checkbox {
			// 	width: 60rpx;
			// 	height: 100%;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// }

			// .img {
			// 	width: 180rpx;
			// 	height: 180rpx;
			// 	margin: 0rpx 10rpx;
			// 	display: flex;
			// 	align-items: center;

			// 	image {
			// 		width: 100%;
			// 		height: 100%;
			// 	}
			// }

			// .content {
			// 	flex: 1;
			// 	display: flex;
			// 	flex-direction: column;

			// 	.title {
			// 		overflow: hidden;
			// 		-webkit-line-clamp: 2;
			// 		text-overflow: ellipsis;
			// 		display: -webkit-box;
			// 		-webkit-box-orient: vertical;
			// 		color: #323233;
			// 		font-size: 28rpx;
			// 	}

			// 	.price {
			// 		color: red;
			// 		font-size: 26rpx;
			// 		margin: 16rpx 0;
			// 	}

			// 	.num {
			// 		display: flex;
			// 		margin-right: 20rpx;
			// 		justify-content: flex-end;
			// 	}
			// }
		}

		.delete-button {
			height: 100%;
		}

		::v-deep .van-submit-bar {
			background: hsla(0, 0%, 100%, 0.95);
		}
	}
</style>